<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>医院后台管理</title>
		<link rel="stylesheet" type="text/css" href="../../admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../admin/css/admin.css"/>
	</head>
	<body>
		<div class="wrap-container welcome-container">
			<div class="row">
				<div class="welcome-left-container col-lg-9">
					<div class="data-show">
						<ul class="clearfix">
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-org f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">已就诊人数</p>
										<p><span id="h1" class="color-org"></span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-blue f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">挂号人数</p>
										<p><span id="h2" class="color-blue"></span>数据<span class="iconfont">&#xe628;</span></p>
									</div>
								</a>
							</li>
							<li class="col-sm-12 col-md-4 col-xs-12">
								<a href="javascript:;" class="clearfix">
									<div class="icon-bg bg-green f-l">
										<span class="iconfont">&#xe606;</span>
									</div>
									<div class="right-text-con">
										<p class="name">排队人数</p>
										<p><span id="h3" class="color-green"></span>数据<span class="iconfont">&#xe60f;</span></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<!--图表-->
					<div class="chart-panel panel panel-default">
						<div class="panel-body" id="chart" style="height: 376px;">
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../admin/lib/echarts/echarts.js"></script>
		<script type="text/javascript">
			layui.use(['layer','jquery'], function(){
                var resize=layui.resize;
				var layer 	= layui.layer;
				var $=layui.jquery;
				//图表
				var myChart;

                var Arr2 = [];//名称
                var jiu = []//个数
                var pai = []//个数
                var gua = []//个数


                $(document).ready(function () {
                    $.ajax({
                        url: '/hospital/countpatAlll',
                        dataType: 'json',
                        type: 'get',
                        success: function (data) {
                            $.each(data.data, function (index, item) {
                                $("#h1").text(item.countjiu);
                                $("#h2").text(item.countgua);
                                $("#h3").text(item.countpai);
                            })


                        }
                    })

                    $.ajax({
                        url: '/hospital/tu',
                        dataType: 'json',
                        type: 'get',
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            console.log(data);
                            // $.each(data.data, function (index, item) {
                            if (data.data != null) {
                                var obj = eval(data.data);//转换为JSON对象
                                for (var i = 0; i < obj.length; i++) {

                                    Arr2.push(obj[i].date);//存入arr
                                    jiu.push(obj[i].jiu);
                                    pai.push(obj[i].pai);
                                    gua.push(obj[i].gua);

                                }
                                // console.log(Arr);

                            }

                            require.config({
                                paths: {
                                    echarts: '/admin/lib/echarts'
                                }
                            });
                            require(
                                [
                                    'echarts',
                                    'echarts/chart/bar',
                                    'echarts/chart/line',
                                    'echarts/chart/map'
                                ],
                                function (ec) {
                                    //--- 折柱 ---
                                    myChart = ec.init(document.getElementById('chart'));
                                    myChart.setOption(
                                        {
                                            title: {
                                                text: "数据统计",
                                                textStyle: {
                                                    color: "rgb(85, 85, 85)",
                                                    fontSize: 18,
                                                    fontStyle: "normal",
                                                    fontWeight: "normal"
                                                }
                                            },
                                            tooltip: {
                                                trigger: "axis"
                                            },
                                            legend: {
                                                data: ["已就诊", "挂号", "排队"],
                                                selectedMode: false,
                                            },
                                            toolbox: {
                                                show: true,
                                                feature: {
                                                    dataView: {
                                                        show: false,
                                                        readOnly: true
                                                    },
                                                    magicType: {
                                                        show: false,
                                                        type: ["line", "bar", "stack", "tiled"]
                                                    },
                                                    restore: {
                                                        show: true
                                                    },
                                                    saveAsImage: {
                                                        show: true
                                                    },
                                                    mark: {
                                                        show: false
                                                    }
                                                }
                                            },
                                            calculable: false,
                                            xAxis: [
                                                {
                                                    type: "category",
                                                    boundaryGap: false,
                                                    data: Arr2
                                                }
                                            ],
                                            yAxis: [
                                                {
                                                    type: "value"
                                                }
                                            ],
                                            grid: {
                                                x2: 30,
                                                x: 50
                                            },
                                            series: [
                                                {
                                                    name: "已就诊",
                                                    type: "line",
                                                    smooth: true,
                                                    itemStyle: {
                                                        normal: {
                                                            areaStyle: {
                                                                type: "default"
                                                            }
                                                        }
                                                    },
                                                    data: jiu
                                                },
                                                {
                                                    name: "挂号",
                                                    type: "line",
                                                    smooth: true,
                                                    itemStyle: {
                                                        normal: {
                                                            areaStyle: {
                                                                type: "default"
                                                            }
                                                        }
                                                    },
                                                    data:gua
                                                },
                                                {
                                                    name: "排队",
                                                    type: "line",
                                                    smooth: true,
                                                    itemStyle: {
                                                        normal: {
                                                            areaStyle: {
                                                                type: "default"
                                                            },
                                                            color: "rgb(110, 211, 199)"
                                                        }
                                                    },
                                                    data: pai
                                                }
                                            ]
                                        }
                                    );
                                }
                            );


                        }

                    })
                })


				/*$(window).resize(function(){
					myChart.resize();
				})*/
			});
		</script>
	</body>
</html>
